<template>
	<view class="tabbar-container">
		<view class="line line1"><i></i></view>
		<view class="line line2"><i></i></view>
		<view class="jiantou"><img src="../../static/jiantou2.png" /></view>

		<ul class="navbar" :style="{backgroundColor:bgColor}">
			<li :class="[{ active: curTabbar == '0' }]" @click="routerTo('0')">
				<u-transition :show="curTabbar == 0" mode="slide-right">
					<image src="../../static/arrow-left.png" class="tabbar-active-img"></image>
				</u-transition>
				<text>活动</text>
				<u-transition :show="curTabbar == 0" mode="slide-left">
					<image src="../../static/arrow-right.png" class="tabbar-active-img"></image>
				</u-transition>
			</li>
			<li :class="[{ active: curTabbar == '1' }]" @click="routerTo('1')">
				<u-transition :show="curTabbar == 1" mode="slide-right">
					<image src="../../static/arrow-left.png" class="tabbar-active-img"></image>
				</u-transition>
				<text>讨论</text>
				<u-transition :show="curTabbar == 1" mode="slide-left">
					<image src="../../static/arrow-right.png" class="tabbar-active-img"></image>
				</u-transition>
			</li>
			<li :class="[{ active: curTabbar == '2' }]" @click="routerTo('2')">
				<u-transition :show="curTabbar == 2" mode="slide-right">
					<image src="../../static/arrow-left.png" class="tabbar-active-img"></image>
				</u-transition>
				<text class="u-line-1">进行中</text>
				<u-transition :show="curTabbar == 2" mode="slide-left">
					<image src="../../static/arrow-right.png" class="tabbar-active-img"></image>
				</u-transition>
			</li>
			<li :class="[{ active: curTabbar == '3' }]" @click="routerTo('3')">
				<u-transition :show="curTabbar == 3" mode="slide-right">
					<image src="../../static/arrow-left.png" class="tabbar-active-img"></image>
				</u-transition>
				<text>我的</text>
				<u-transition :show="curTabbar == 3" mode="slide-left">
					<image src="../../static/arrow-right.png" class="tabbar-active-img"></image>
				</u-transition>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	name: 'Tabbar',
	props:{
		bgColor:{
			default:'transparent'
		}
	},
	data() {
		return {
			curTabbar: this.$route.query.p || '0',
			pathArr: ['activity', 'talk', 'processing', 'user'] //路径地址
		};
	},
	methods: {
		routerTo(index) {
			uni.navigateTo({
				url: `/pages/${this.pathArr[index]}/index?p=${index}`
			});
		}
	},
	computed: {}
};
</script>

<style scoped lang="scss">
.tabbar-container {
	position: fixed;
	height: 60px;
	bottom: 0;
	width: 100%;
	z-index: 9999 !important;

	.navbar {
		width: 100%;
		background-color: transparent;
		display: flex;
		flex-flow: row nowrap;
		position: absolute;
		bottom: 0;

		li {
			background-color: transparent;
			height: 50px;
			flex: 25%;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: center;
			color: #fff;
			text {
				margin-top: -3px;
			}
		}
		li.active {
			color: #9ad3bc;
		}
	}

	.line {
		height: 1px;
		background-color: #fff;
		width: 50%;
		position: absolute;
		top: 0;
		i {
			width: 4px;
			height: 4px;
			margin-top: -2px;
			position: absolute;
			top: 50%;
			background: url('@/static/dian.png') no-repeat;
			background-size: 100% 100%;

			&:before {
				content: '';
				background: url('@/static/dianbg.png') no-repeat;
				background-size: 100% 100%;
				opacity: 0.25;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin: -23px 0 0 -23px;
				animation: fadeinout 1s infinite ease-in-out alternate;
			}
		}
	}

	.line1 {
		margin-right: 35px;
		right: 50%;
		i {
			right: -2px;
		}
	}

	.line2 {
		left: 50%;
		margin-left: 35px;
		i {
			left: -2px;
		}
	}

	.jiantou {
		width: 46px;
		margin-left: -23px;
		height: 15px;
		position: absolute;
		top: auto;
		bottom: 100%;
		left: 50%;
		// margin-left: -45px;
		img {
			width: 100%;
			display: block;
			height: auto;
		}
	}
}

.tabbar-active-img {
	width: 24px;
	height: 24px;
}

@keyframes fadeinout {
	0% {
		opacity: 0.5;
		transform: scale(1);
	}
	100% {
		opacity: 0.1;
		transform: scale(0.85);
	}
}
</style>
